<template>
    <div class="index">
        <div class="breadcrumb-def"><el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>资产盘点-附加</el-breadcrumb-item>
            </el-breadcrumb></div>
        <div class="search-def">
            <el-input size="small" style="width: 250px;" v-model="parameter.name"
                placeholder="卡片编号/资产名称/使用部门"></el-input>
                <el-input size="small" style="width: 250px;" v-model="parameter.no"
                placeholder="盘点单号"></el-input>
            <el-button size="small" @click="searchDataEv()" type="primary">查询</el-button>
            <el-button size="small" @click="ExportDataEvent()" type="primary">导出数据</el-button>
        </div>
        <div class="vxe-table-def"><vxe-table :column-config="{resizable: true}" show-overflow ref="xTable1" height="100%" align="center" :data="tableData"
                v-loading="loading" element-loading-text="拼命加载中">
                <vxe-column type="seq" width="60"></vxe-column>
                <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
                <vxe-column field="no" title="盘点单号"></vxe-column>
                <vxe-column field="docno" title="卡片编号"></vxe-column>
                <vxe-column field="assetname" title="资产名称"></vxe-column>
                <vxe-column field="count_qty" title="数量"></vxe-column>
                <vxe-column field="spc" title="规格型号"></vxe-column>
                <vxe-column field="leibie" title="资产类别"></vxe-column>
                <vxe-column field="shiwuname" title="实物名称"></vxe-column>
                <vxe-column field="shiw_qty" title="实物数量"></vxe-column>
                <vxe-column field="dep_name" title="使用部门"></vxe-column>
                <vxe-column field="weizhi" title="存放地点"></vxe-column>
                <vxe-column field="cus1" title="供应商"></vxe-column>
                <vxe-column field="cus2" title="制造商"></vxe-column>
                <vxe-column field="rem" title="备注"></vxe-column>
                <vxe-column field="create_user" title="创建人"></vxe-column>
                <vxe-column title="操作">
                    <template #default="{ row }">
                        <el-popconfirm placement="top-end" @confirm="deleteEv(row.id)" title="确定永久删除此记录吗？">
                            <el-button slot="reference" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>
                </vxe-column>
            </vxe-table></div>

        <div class="page-def"><vxe-pager v-if="tableData.length > 0" :loading="loading"
                :current-page="this.parameter.page" :page-size="this.parameter.pageSize" :total="this.parameter.total"
                :page-sizes="[50, 100, 300, 500, 1000,10000]"
                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                @page-change="handlePageChange">
            </vxe-pager></div>

    </div>
</template>

<script>
import { dateFormatsa } from '@/utlis/FunctionUtils.js'

export default {
    name: 'fixedAssets',
    components: {},
    data() {
        return {
            loading: false,
            text: '',
            tableData: [],
            parameter: {
                name: '',
                no: '',
                page: 1,
                pageSize: 300,
                total: 0
            },
            dialogShow: false,
            selectList: [],
            select_no: '',
            countData: {
                c_no: '',
                qty: 0
            }
        }
    },
    async mounted() {

    },
    methods: {
        async searchDataEv() {
            this.parameter.page = 1
            await this.searchEv()
        },
        async searchEv() {
            let parameterData = {}
            parameterData.name = this.parameter.name
            parameterData.no = this.parameter.no
            parameterData.page = this.parameter.page
            parameterData.pageSize = this.parameter.pageSize
            this.tableData = []
            this.loading = true
            try {
                const arr_data = await this.BaseCartFuJiaGet(parameterData)
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: '查询失败',
                        duration: 0
                    })
                    return
                }
                this.tableData = arr_data.data.result.data
                this.parameter.total = arr_data.data.result.total

                this.text = '正在拼命加载中...'
                this.loading = false
            } catch (error) {
                this.loading = false
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '查询接口请求失败',
                    duration: 0
                })
            }


        },
        async handlePageChange({ currentPage, pageSize }) {
            this.parameter.page = currentPage
            this.parameter.pageSize = pageSize
            await this.searchEv()
        },
        async deleteEv(rowId) {
            console.log('点击删除');
            this.loading = true
            try {
                const arr_data = await this.BaseCartFuJiaDelete({ id: rowId })
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: '删除失败',
                        duration: 0
                    })
                    return
                }

                this.text = '正在拼命加载中...'
                this.loading = false
                this.searchEv()
                this.$message.success({
                    showClose: true,
                    message: '删除成功'
                })
            } catch (error) {
                this.loading = false
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '删除接口请求失败',
                    duration: 0
                })
            }
        },
        // 导出数据
        async ExportDataEvent() {
            if (this.tableData.length == 0) {
                this.$message.error('没有需要导出的数据')
                return
            }
            await this.$refs.xTable1.exportData({
                filename: '资产盘点记录明细',
                sheetName: 'Sheet1',
                type: 'xlsx'
            })
        },
    }
}
</script>

<style lang='less' scoped>
.index {
    height: 100%;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    // background-color: red;
}

.breadcrumb-def {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    // background-color: white;
}

.search-def {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
}

.page-def {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    background-color: white;
}

.vxe-table-def {
    height: calc(100% - 120px);
}

.modal-itm {
    padding-bottom: 10px;
    box-sizing: border-box;
}
</style>